<template>
  <div>
    <v-header title="主题">
      <div slot="left" class="item" flex="main:center cross:center" v-on:click="route_back()">
        <i class="iconfont icon-back"></i>
      </div>
    </v-header>


    <v-content style="bottom: 0;" v-vuet-scroll="{ path: 'topic-detail', name: 'content' }">
      <v-loading v-if="data.loading"></v-loading>
      <v-data-null v-if="!data.existence" msg="话题不存在"></v-data-null>
      <template v-if="!data.loading && data.existence">
        <div class="common-typeicon" flex v-if="topic.top || topic.good">
          <div class="icon" v-if="topic.good">
            <i class="iconfont icon-topic-good"></i>
          </div>
          <div class="icon" v-if="topic.top">
            <i class="iconfont icon-topic-top"></i>
          </div>
        </div>

        <ul class="re-list">

            <!-- 
		  <wv-cell class="cell-big-thumb" value="">
			<template slot="bd">
			<p style="margin-bottom: 10px;line-height: 1.4;font-weight: 400;font-size: 24px;color: #000000;">{{topic.title}}</p>

			</template>
		  </wv-cell>

            
    	  <div style="border-bottom: 1px solid #e6ebf1;"></div>
            -->

    <div class="_full_inner _scroll _effect component-chat" :class="{'_effect--30':decline}">
		<ul class="wechat-list">
                <div class="info">

			    <p style="margin-bottom: 10px;line-height: 1.4;font-weight: 400;font-size: 24px;color: #000000;">{{topic.title}}</p>

          	     <router-link :to="{ name: 'user-detail', params: { username: topic.author.loginname } }">
                    <div class="ico-box">
                        <div class="ico">
                            <img :src="topic.author.avatar_url" alt="pic">
                        </div>
                    </div>

                    <div class="desc">
                        <div class="desc-title" v-text="topic.author.loginname.substring(29)"></div>
                        <div class="desc-message">
                            <span v-text="">访问次数{{topic.visit_count}} | 回复次数 {{topic.reply_count}}</span>
                        </div>

			            <p style="font-size: 14px;color: #888888;">分享: 点击右上角:发送给朋友分享到群中</p>
                    </div>
          	        </router-link>
                </div>
			   <div style="border-bottom: 1px solid #e6ebf1;"></div>
        </ul>
	  </div>

          <li>
          <div class="markdown-body">
          	<div v-html="topic.content"></div>
			<!--
          	<div style=" hr:{margin: 20px 0;border: 0;border-top: 1px solid #eeeeee;border-bottom: 1px solid #ffffff;}" v-html="topic.content"></div>
			-->
		  </div>
      
          </li>

          <!-- 主题信息 end -->
          <li class="replies-count" v-if="replies.length">
            共(<em>{{ replies.length }}</em>)条回复
          </li>

          <!-- 主题评论 start -->
		  <div v-for="(item, $index) in replies">

			 <wv-cell class="cell-big-thumb" :value="item.create_at | formatDate" :to="{ name: 'user-detail', params: { username: item.author.loginname } }">
				<div slot="icon" style="position: relative;margin-right: 5px;">
				<img :src="item.author.avatar_url" style="width: 48px; height: 48px;border-radius: 5px;display: block">
				</div>
				<template slot="bd">
				<p style="font-size: 18px;color: #000000;">{{item.author.loginname.substring(29)}}</p>
				<p style="font-size: 14px;color: #888888;"><div style="font-size: 14px;color: #888888;" v-html="item.content"></div></p>
				</template>
			  </wv-cell>

				

			 <div class="bottom" flex="dir:right cross:center">
				<div class="icon" @click="commentShow(item, $index)">
				  <i class="iconfont icon-comment-topic"></i>
				</div>
				<div class="icon" :class="{ fabulous: testThing(item.ups) }" @click="fabulousItem(item)">
				  <i class="iconfont icon-comment-fabulous"></i>
				  <em v-if="item.ups.length">{{ item.ups.length }}</em>
				</div>
			 </div>

			 <reply-box
				  v-if="data.commentId === item.id"
				  :loginname="item.author.loginname"
				  :replyId="item.id"
				  @success="data.fetch()">
			 </reply-box>

			 <div style="border-bottom: 1px solid #e6ebf1;"></div>
		  </div>
          <!-- 主题评论 end -->
        </ul>
        <div class="reply" v-if="self.id">
          <reply-box @success="data.fetch()"></reply-box>
        </div>
        <div class="tip-login" v-if="!self.id">
          你还未登录，请先
          <router-link to="/login">登录</router-link>
        </div>
      </template>
    </v-content>
  </div>
</template>
<script>
  import http from 'http'
  import replyBox from './reply-box'
  import { mapModules, mapRules } from 'vuet'

  export default {
    mixins: [

      mapModules({ data: 'topic-detail', self: 'user-self', weixin: 'weixin-api' }),
      mapRules({ route: 'topic-detail' })
    ],
    components: { replyBox },
    computed: {
      topic () {
		//this.weixin.share(this.data.topic.author + ":" + this.data.topic.title, 'http://m.doubilol.com/logo.jpg');
		this.weixin.share(this.data.topic.author.loginname.substring(29) + ":" + this.data.topic.title, 'http://m.doubilol.com/logo.jpg');
        return this.data.topic
      },
      author () {
        return this.data.topic.author
      },
      replies () {
        return this.data.topic.replies
      }
    },
    data () {
        return {
        }
    },
    created: function () {

	},
    methods: {
      testThing (ups) { // 验证是否点赞
        return ups.indexOf(this.self.id || '') > -1
      },
      fabulousItem ({ ups, id }) { // 点赞
        if (!this.self.id) return this.$router.push('/login')
        var index = ups.indexOf(this.self.id)
        if (index > -1) {
          ups.splice(index, 1)
        } else {
          ups.push(this.self.id)
        }
        http.post(`/reply/${id}/ups`)
      },
      commentShow (item) { // 显示隐藏回复框
        if (!this.self.id) return this.$router.push('/login')
        //this.data.commentId = this.data.commentId === item.id ? null : item.id
        this.data.commentId = item.id
      },
	  route_back() {

		if (this.$router.go(-1) != 0) {
			this.$router.push({name: 'index'});
		}

	  }
    }
  }

</script>
<style lang="less" scoped>
  @import '../../../less/config';
  .datas {
    padding: 10px;
    border-bottom: 1px solid #eee;
    .tit {
      position: relative;
      padding: 10px 0;
      margin: 0;
      line-height: 24px;
      font-weight: bold;
      font-size: 22px;
      text-align: center;
      color: @text;
    }
    .bottom {
      .item {
        padding: 0 5px;
        color: #666;
        .iconfont {
          padding-right: 3px;
        }
      }
    }
  }


  .re-list {
    li {
      padding: 10px;
      border-bottom: 1px solid #eee;
    }
    .headimg {
      padding-right: 10px;
      .pic {
        overflow: hidden;
        display: block;
        width: 28px;
        height: 28px;
        border-radius: 50%;
        border: 1px solid #ddd;
        background-color: #eee;
        background-position: center center;
        background-size: cover;
      }
    }
    time {
      padding-left: 10px;
      font-size: 12px;
    }
    .num {
      font-size: 13px;
    }
    .bottom {
      .icon {
        position: relative;
        padding: 5px 10px;
        &.fabulous {
          color: @main;
        }
        em {
          font-size: 13px;
          font-style: normal;
        }
      }
    }
    .markdown-body {
      padding: 10px 0;
	  hr {margin: 20px 0;border: 0;border-top: 1px solid #eeeeee;border-bottom: 1px solid #ffffff;}
    }
    .replies-count {
      border-left: 5px solid @main;
      em {
        font-style: normal;
        color: @main;
      }
    }
  }


  .reply {
    padding: 10px 10px;
  }


  .tip-login {
    padding: 100px;
    text-align: center;
  }

.cell-icon {
    display: block;
    width: 40px;
    margin-right: 5px;
}


.component-chat .wechat-list {
    position: relative;
    overflow-x: hidden;
    padding: 10px 0;
}

.component-chat .wechat-list .info {
    transition: .2s all linear;
}

.component-chat .wechat-list .item .info.current {
    transform: translate3d(-156px, 0, 0);
    -webkit-transform: translate3d(-156px, 0, 0);
}

.component-chat .wechat-list .item .info:active {
    background-color: #d9d9d9;
}

.component-chat .wechat-list .item {
    position: relative;
}

.component-chat .wechat-list .item:last-child:after {
    content: "";
    position: absolute;
    width: 200%;
    left: 0;
    z-index: 2;
    left: 8px;
    bottom: 0;
    transform: scale(.5);
    transform-origin: 0 0;
    -webkit-transform: scale(.5);
    -webkit-transform-origin: 0 0;
    background-color: #b7b7b7;
    height: 1px;
}

.component-chat .wechat-list .info {
    position: relative;
    z-index: 2;
    left: 0;
    width: 100%;
    padding: 8px;
    background-color: #ffffff;
    transition: .2s transform linear;
}

.component-chat .wechat-list .info--stick {
    background-color: #f2f2f6;
}

.component-chat .wechat-list .info .ico-box {
    position: relative;
    float: left;
    width: 30px;
    height: 30px;
    margin-right: 10px;
    /* background: #d6d5d3; */
}

.component-chat .wechat-list .info .ico {
    height: 100%;
    border-radius: 15px;
    overflow: hidden;
}

.component-chat .wechat-list .info .ico img {
    width: 100%;
    border: 0;
}

.ico_title {
    text-align : center;
    background: #ff7575 url(/images/alert-overlay.png) repeat-x;
    display: inline-block;
    padding: 1px 10px 1px;
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    line-height: 1;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    position: relative;
    cursor: pointer; 
}

.component-chat .wechat-list .info .desc {
    overflow: hidden;
}

.component-chat .wechat-list .info .desc-time {
    float: right;
    color: #b2b2b2;
	padding-right: 12px;
}

.component-chat .wechat-list .item .handle {
    position: absolute;
    z-index: 1;
    height: 100%;
    right: 0;
    top: 0;
    display: flex;
}

.component-chat .wechat-list .item .handle>div {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #c7c7cc;
    color: #ffffff;
    font-size: 18px;
    padding: 0 12px;
}

.component-chat .wechat-list .item .handle .handle-del {
    background-color: #ff3b30;
}

.component-chat .wechat-list .desc-title {
    height: 25px;
    line-height: 25px;
    font-size: 18px;
    color: #000;
}

.component-chat .wechat-list .desc-message {
    --height: 23px;
    max-height: 69px;
    line-height: 23px;
    font-size: 16px;
    color: #888888;
}

.component-chat .wechat-list .desc-message {
    --height: 23px;
    max-height: 69px;
    line-height: 23px;
    font-size: 14px;
    color: #888888;
}

.component-chat .wechat-list .info .desc-mute {
    float: right;
    color: #b8b8b8;
    font-size: 14px;
}

.component-chat .wechat-list .info.active .desc-mute {
    color: #b9b9b9;
}

.component-chat ._line-fine:before {
    z-index: 3;
    left: 8px;
}

.component-chat .chat-item-transition {
    --height: 64px;
    transition: .3s height ease;
}

.component-chat .chat-item-leave {
    height: 0;
    overflow: hidden;
}
</style>
